<template>
	<view>
		<!-- <view class="top">
			<picker @change="pickerConfirm" :value="codeNameIndex" :range="codeArrsName">
				<view class="topselect" @click="pickerShow = true">
					<div class="name u-line-1">南门进口</div>
					<view class="icon">
						<image src="../../static/下拉箭头@2x.png" mode="" style="width: 20rpx;height: 12rpx;"></image>
					</view>
				</view>
			</picker>
			<view class="topsearch" @click="showRight">
				<view class="icon">
					<icon name="search" size='48rpx'></icon>
				</view>
				<view class="name">
					筛选条件查询磅单
				</view>
			</view>
		</view> -->
		<view class="Box bb" v-for="item in list" :key="item.id" @click="intoDetail(item.id)">
			<view class="type">过磅类型：{{item.weighing_type == 1 ? '一次过磅' : '二次过磅'}}</view>
			<view class="type" style="margin-top: 10rpx;">供货方：{{item.goods_exporter || '-'}}</view>
			<view class="type" style="margin-top: 10rpx;">收货方：{{item.goods_importer || '-'}}</view>
			<view class="line"></view>
			<view class="u-flex u-row-between" style="margin-top: 32rpx;">
				<view style="font-size: 32rpx;font-weight: 900;color: rgba(51, 51, 51, 1);">
					车牌号：
				</view>
				<view class="licensePlateBox">
					{{item.car_plate || '-'}}
				</view>
			</view>
			<view class="u-flex u-row-between" style="height: 72rpx;">
				<view style="font-size: 32rpx;font-weight: 900;color: rgba(51, 51, 51, 1);">
					重量：
				</view>
				<view class="rightBox">
					{{item.weight / 1000}}kg
				</view>
			</view>
			<view class="u-flex u-row-between" style="height: 72rpx;">
				<view style="font-size: 32rpx;font-weight: 900;color: rgba(51, 51, 51, 1);">
					货物名称：
				</view>
				<view class="rightBox">
					{{item.goods_name || '-'}}
				</view>
			</view>
			<view class="u-flex u-row-between" style="height: 72rpx;">
				<view style="font-size: 32rpx;font-weight: 900;color: rgba(51, 51, 51, 1);">
					过磅费：
				</view>
				<view class="rightBox">
					¥{{item.total_fee}}
				</view>
			</view>
			<view class="line"></view>
			<view class="u-flex u-row-between" style="margin-top: 32rpx;">
				<view style="color: rgba(51, 51, 51, 0.5);">{{item.created_at}}</view>
				<view style="color: rgba(51, 51, 51, 0.5);text-align: right;">{{item.device_station}}</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center">
			<screening />
		</uni-popup>
		<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow=false"></plate-input>
	</view>
</template>

<script>
	import screening from '../../components/screening.vue'
	import { getPoundBill } from '../../common/api.config.js'
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue'
	export default {
		components:{screening},
		data() {
			return {
				queryForm:{
					page:1,
					page_size:20,
					car_plate:''
				},
				list:[]
			}
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh() {
			this.queryForm.page = 1
			this.getList('Refresh')
		},
		onReachBottom() {
			this.queryForm.page = this.queryForm.page + 1
			this.getList()
		},
		methods: {
			showRight(){
				this.$refs.popup.open('right')	
			},
			async getList(type = ''){
				uni.showLoading({
					title:'请求中'
				})
				var { data, code } = await getPoundBill(this.queryForm)
				uni.hideLoading()
				if(code == 1){
					if(type == 'Refresh'){
						this.list = data
					}else{
						this.list = this.list.concat(data)
					}
				}
			},
			intoDetail(id){
				uni.navigateTo({
					url:'/pages/poundBillDetail/poundBillDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(246, 246, 246, 1);
		padding-bottom: 30rpx;
	}
	.rightBox{
		font-size: 32rpx;
		font-weight: 900;
		color: rgba(51, 51, 51, 1);
	}
	.licensePlateBox {
		width: 200rpx;
		height: 72rpx;
		background: rgba(253, 209, 0, 1);
		border-radius: 8rpx;
		text-align: center;
		line-height: 72rpx;
		border: 4rpx solid #000;
	}

	.Box {
		width: 686rpx;
		// height: 668rpx;
		opacity: 1;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 12rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
		margin: 32rpx 0 0 32rpx;
		padding: 32rpx;

		.line {
			width: 622rpx;
			height: 2rpx;
			background: rgba(232, 232, 232, 1);
			margin-top: 30rpx;
		}

		.type {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}

	.top {
		background-color: #f1dc27;
		display: flex;
		width: 750rpx;
		z-index: 1;
		height: 88rpx;
		position: fixed;
		left: 0;
		top: 0;
	}

	.topselect {
		margin: 10rpx 0 0 32rpx;
		width: 236rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 428rpx;
		display: flex;
		position: relative;

		.name {
			width: 145rpx;
			height: 42rpx;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			margin: 12rpx 0 0 32rpx;
		}

		.icon {
			position: absolute;
			top: 10rpx;
			right: 32rpx;
		}
	}

	.topsearch {
		width: 430rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 428rpx;
		margin: 10rpx 0 0 20rpx;
		display: flex;
		align-items: center;

		.icon {
			margin-left: 74rpx;
		}

		.name {
			left: 410rpx;
			top: 198rpx;
			width: 224rpx;
			height: 42rpx;
			color: rgba(102, 102, 102, 1);
			font-size: 28rpx;
		}
	}
	.popupBox{
		width: 630rpx; 
		height: 100vh;
		background: rgba(255, 255, 255, 1);
	}
</style>
